<template>
  <div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="每日所需化学物质用量：" style="width: 600px;font-size: 8ex" prop="zjWzyl"
                      :rules="[
            {required: true, message: '每日所需化学物质用量不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.zjWzyl" style="width: 60%;" placeholder="请输入内容" @change="setOther"></el-input>
          <el-button round @click="showAll">其他方式获取</el-button>
        </el-form-item>

        <el-col :span="23"><div class="grid-content bg-purple">计算预处理工序中废水排放量填写以下项</div></el-col>
        <br>
        <br>
        <el-form-item label="每日处理纺织品量：" style="width: 600px;font-size: 8px" prop="jjFzpl">
          <el-input v-model="form.jjFzpl" style="width: 100%;" placeholder="请输入内容" @change="setOther">
          </el-input>
        </el-form-item>
        <el-form-item label="上游环节带入浆料油剂比重：" style="width: 600px;font-size: 8ex" prop="yjbz"
                      :rules="[
            {required: true, message: '油剂比重不能为空',trigger: 'blur'}
          ]">
          <el-input v-model="form.yjbz" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
      </el-form>

      <el-form ref="form" :model="form2" label-width="200px" v-show=showOther>
        <el-form-item>
          <el-button round @click="getInput_1">计算每日所需化学物质用量</el-button>
        </el-form-item>
        <el-form-item label="登记量：" style="width: 600px;font-size: 8ex" prop="zjDjl">
          <el-input v-model="form2.zjDjl" style="width: 100%;" placeholder="请输入内容" @change="setInput_1">
            <template slot="append">t/d</template>
          </el-input>
        </el-form-item>

        <el-form-item label="主要排放源占比：" style="width: 600px;font-size: 8ex" prop="zjPfyzb" >
          <el-input v-model="form2.zjPfyzb" style="width: 100%;" placeholder="请输入内容(0~1范围内)" @change="setInput_1">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
        <el-form-item label="年工作时间：" style="width: 600px;font-size: 8ex" prop="zjJobtime">
          <el-input v-model="form2.zjJobtime" style="width: 100%;" placeholder="请输入内容" @change="setInput_1">
            <template slot="append">d/y</template>
          </el-input>
        </el-form-item>

        </el-form>
      <br>
      <br>
      <el-button style="margin-top: 12px;" @click="goBack">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="sendDirectUsage">下一步</el-button>
    </div>

  </div>

</template>

<script>

    export default {
        name: "DirectUsage",
      data(){
        return{
          form:{
            zjWzyl: "",
            jjFzpl:"",
            yjbz:"1",
          },
          form2:{
            zjDjl: "",
            zjPfyzb: "",
            zjJobtime: "",
          },
          showOther: false,
        }
      },
      watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
        'form2.zjPfyzb':function (newVal, oldValue) {
          if(parseFloat(newVal) < 0 || parseFloat(newVal) > 1){
            this.form2.zjPfyzb = ''
            this.$message({
              message: "数值只能在0-1之间",
              type: 'warning'
            });
          }
        },
        'form.yjbz':function (newVal, oldValue) {
          if(parseFloat(newVal) < 0 || parseFloat(newVal) > 1){
            this.form2.zjPfyzb = ''
            this.$message({
              message: "数值只能在0-1之间",
              type: 'warning'
            });
          }
        },
      },
      methods:{
          showAll(){
            this.showOther = true;
          },
        setOther(){
          this.form2.zjDjl = '';
          this.form2.zjPfyzb = '';
          this.form2.zjJobtime = '';
        },
        setInput_1(){
          this.form.zjWzyl = '';
        },
        getInput_1(){
          if(this.form2.zjDjl!=''&&this.form2.zjPfyzb!=''&&this.form2.zjJobtime!=''){
            this.form.zjWzyl = parseFloat(this.form2.zjDjl * this.form2.zjPfyzb / this.form2.zjJobtime / this.form2.zjJobtime).toFixed(6);
          }
          else{
            this.$message("请检查数据是否完整")
          }
        },
        goBack(){
          this.$emit('goBack');
        },
        sendDirectUsage(){
          if(this.form.zjWzyl!=''){
            //let flag = {flag:'1'}
            let usageParameter = {flag:'1',zjWzyl:this.form.zjWzyl,zjDjl:this.form2.zjDjl,zjPfyzb:this.form2.zjPfyzb,zjJobtime:this.form2.zjJobtime,jjFzpl:this.form.jjFzpl,yjbz:this.form.yjbz,jjYjl:'',jjYxcfhl:'',jjFzpbl:''}
            this.$store.commit("setUsageParameter",usageParameter);
            this.$emit('listenChild');
          }
          else{
            this.$message("每日所需化学物质不能为空")
          }

        }
      },

    }
</script>

<style scoped lang="scss">

</style>
